<template>
  <div class="handle-box">
    <el-dialog
        v-model="handleDialogVisible"
        title="请假申请"
        width="50%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        draggable
        style="height: auto;
        background-color:#fff;
        padding-bottom: 3vh;
        "
        :before-close="handleClose"
    >
      <div class="leave-detail-box">
        <div class="top">
          <div class="t1">
            <div class="t1-item">
              <div class="t1-title">请假时间</div>
              <div class="t1-con">{{detail_form.starting_date}} &nbsp;至 &nbsp;{{detail_form.termination_date}}</div>
            </div>
            <div class="t1-item">
              <div class="t1-title">请假天数</div>
              <div class="t1-con">{{detail_form.total_days}}</div>
            </div>
          </div>
          <div class="t2">
            <div class="t2-item">
              <div class="t2-title">请假事由</div>
              <div class="t2-con">{{detail_form.flow_detail}}</div>
            </div>
          </div>
        </div>
        <div class="bot">
          <div class="b1">
            <div class="b1-item">
              <div class="b1-title">审核状态</div>
              <div class="b1-con">
                <div v-if="detail_form.status === 0">已提交</div>
                <div v-if="detail_form.status === 1">审核中</div>
                <div v-if="detail_form.status === 2">已完成</div>
              </div>
            </div>
            <div class="b1-item">
              <div class="b1-title">当前审核人</div>
              <div class="b1-con">{{ detail_form.operator_name }}</div>
            </div>
            <div class="b1-item">
              <div class="b1-title">抄送人</div>
              <div class="b1-con">
                {{ detail_form.copy_name ? detail_form.copy_name : '无' }}
              </div>
            </div>
          </div>
          <div class="b2">
            <div class="b2-item">
              <div class="b2-title">历史审批</div>
              <div class="b2-con" v-if="historyOperator.length">
                <p v-for="(item,index) in historyOperator" :key="index" style="font-weight: 600; color: #1E90FF">
                  {{ item }}&nbsp;
                  <span v-if="!isLastItem(index)" style="font-weight: 400; color: black">
                    -> &nbsp;
                  </span>
                </p>
              </div>
              <div class="b2-con" v-else>
                暂无数据
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="no-border" v-if="isFormShow">
        <div class="form-box" v-if="detail_form.status !== 2">
          <div class="form-item" style="height: 5vh;line-height: 5.5vh">
            <div class="title">
              审批节点
            </div>
            <div class="input">
              <el-select
                  v-model="submit_form.isLast_node"
                  placeholder="请选择审批节点，是否还有下一审批人"
                  size="large"
                  style="width: 99%;height: 4.5vh"
              >
                <el-option
                    v-for="item in isLast_node"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div class="form-item next"
               style="height: 6vh;
             line-height: 6vh"
               v-if="isNextShow"
          >
            <div class="title">
              选择下一审批人
            </div>
            <div class="input">
              <el-cascader v-model="submit_form.nextOperator" :options="options" placeholder="请选择下一审批人"/>
            </div>
          </div>
          <div class="form-item" style="height: 10vh;line-height: 10vh">
            <div class="title">
              审批描述
            </div>
            <div class="input">
              <el-input
                  v-model="submit_form.reason"
                  style="width: 99%;height: 9.5vh"
                  type="textarea"
                  placeholder="请输入审批描述,不超过70字"
              />
            </div>
          </div>
          <div class="form-item" style="height: 5vh;line-height: 5.5vh">
            <div class="title">
              审批意见
            </div>
            <div class="input">
              <el-select
                  v-model="submit_form.result"
                  placeholder="请选择审批结果"
                  size="large"
                  style="width: 99%;height: 4.5vh"
              >
                <el-option
                    v-for="item in resultOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </div>
          </div>
        </div>
        <div class="form-submit" v-show="detail_form.status !== 2">
          <el-button type="primary" @click="submitResult">
            提交
          </el-button>
        </div>
      </div>
      <div class="approve-result" v-show="detail_form.status === 2">
        <div class="form-item" style="height: 5vh;line-height: 5.5vh">
          <div class="title">
            审批结果
          </div>
          <div class="input">
            <div v-if="detail_form.result === 1">
              通过
            </div>
            <div v-if="detail_form.result === 0">
              拒绝
            </div>
            <div v-if="detail_form.result === null">
              待审批
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {ElButton, ElDialog, ElMessage, ElRadioGroup, ElRadio, ElInput, ElCascader} from "element-plus"
import {onMounted, reactive, ref, defineEmits, watch} from "vue"
import {checkUserByRole, getCurrentFlow, operateLeaveFlow} from "@/api"
import emitter from "@/lib/eventBus"
import {useRoute} from "vue-router"

const route = useRoute()
const emits = defineEmits(['reloadHandle','reloadAll'])

let user_info
const handleDialogVisible = ref(false)
const historyOperator = ref([])
const options = ref([])
const rules = {
  node:{},
  next:{},
  reason:{},
  result:{},
}
const hasNext = ref(true)

const resultOptions = [
  {
    value: 1,
    label: '通过',
  },{
    value: 0,
    label: '拒绝',
  },
]
const isLast_node = [
  {
    value: 1,
    label: '结束审核',
  },{
    value: 0,
    label: '继续选择下一审批人',
  },
]

const isNextShow = ref(true)
const isFormShow = ref(true)

let currentFlowId

let detail_form = reactive({
  starting_date:'',
  termination_date:'',
  flow_detail:'',
  total_days:'',
  status:'',
  operator_name:'',
  copy_name:'',
})

let submit_form = reactive({
  result:null,
  reason:null,
  nextOperator:null,
  flowId:'',
  isLast_node:null,
  userId:'',
})

const history_operator = ref([])

onMounted(() => {
  if(route.path === '/handled'){
    hasNext.value = false
    isFormShow.value = false
  }
  getUserInfo()
  getUserList()
})

const getUserInfo = () => {
  user_info = JSON.parse(localStorage.getItem('syhyDocManSys'))
}

const getUserList = async () => {
  try {
    let rolename = []
    let roleUser = []
    const {data:res} = await checkUserByRole()
    const values = Object.values(res.data)
    values.forEach(value => {
      let datas = Object.values(value)
      datas.forEach(data => {
        if(typeof data === "string"){
          rolename.push(data)
        } else {
          roleUser.push(data)
        }
      })
    })
    for (let i = 0; i < 6; i++){
      options.value.push({
        label:rolename[i],
        value:null,
        children:[]
      })
      for (let j = 0; j < roleUser[i].length; j++){
        options.value[i].children.push({
              label:roleUser[i][j].user_name,
              value:roleUser[i][j].user_id,
            }
        )
      }
    }
  } catch (e) {
    console.log(e)
  }
}

const showDetails = async (id) => {
  try {
    currentFlowId = id
    const {data:res} = await getCurrentFlow({
      flowId:id
    })
    // console.log(res,'hanDia')
    if(res.code === 200){
      detail_form = res.data.info
      //遍历填充历史审批
      for (let i = 0; i < res.data.history_operator.length; i++){
        historyOperator.value.push(res.data.history_operator[i])
      }
      // console.log()
      handleDialogVisible.value = true
    } else {
      ElMessage({
        message:'获取失败',
        type:'error'
      })
    }
  } catch (e) {
    console.log(e)
  }
}

const submitResult = async () => {
  try {
    if (submit_form.result !== 0 && submit_form.result !== 1){
      return ElMessage({
        message:'审批结果不能为空!',
        type:'error'
      })
    } else if (submit_form.last_node === 0 && !submit_form.nextOperator){
      return ElMessage({
        message:'请选择下一个审批人!',
        type:'error'
      })
    } else {
      const {data:res} = await operateLeaveFlow({
        result:submit_form.result,
        reason:submit_form.reason,
        nextOperator:submit_form.nextOperator ? submit_form.nextOperator[submit_form.nextOperator.length-1] :null,
        flowId:currentFlowId,
        last_node:submit_form.isLast_node,
        userId:user_info.id,
      })
      if(res.code === 200){
        submit_form = {
          result:null,
          reason:null,
          nextOperator:null,
          flowId:'',
          isLast_node:null,
          userId:'',
        }
        if(route.path === '/all-handle'){
          emits('reloadAll')
        } else if (route.path === '/to-handle'){
          emits('reloadHandle')
        }
        handleDialogVisible.value = false
        return ElMessage({
          message:'操作成功!',
          type:'success'
        })
      } else {
        return ElMessage({
          message:'操作失败!',
          type:'warning'
        })
      }
    }

  } catch (e) {
    console.log(e)
  }
}


const isLastItem = (index) => {
  return index === historyOperator.value.length - 1;
}

const handleClose = () => {
  submit_form.result = null
  submit_form.reason = null
  submit_form.nextOperator = null
  submit_form.flowId = ''
  submit_form.isLast_node = null
  submit_form.userId = ''

  if(route.path === '/all-handle'){
    emits('reloadAll')
  } else if (route.path === '/to-handle'){
    emits('reloadHandle')
  }
  handleDialogVisible.value = false
}

watch([()=>submit_form.isLast_node,()=>submit_form.result],()=>{
  if (submit_form.isLast_node === 1){
    isNextShow.value = false
    submit_form.nextOperator = null
  } else if (submit_form.isLast_node !== 1) {
    isNextShow.value = true
    submit_form.nextOperator = null
  }

  if (submit_form.result === 0){
    submit_form.isLast_node = 1
    isNextShow.value = false
    submit_form.nextOperator = null
  }
})



defineExpose({
  showDetails,
})
</script>

<style scoped lang="less">
.handle-box{
  box-sizing: border-box;
  height: 95%;
  .leave-detail-box{
    width: 95%;
    margin: 3vh auto;
    .top{
      background-color:#fff;
      border: 1px solid rgb(238,238,238);
      //border-left: none;
      display: flex;
      flex-direction: column;
      margin-top: 2vh;
      .t1{
        width: 100%;
        font-size: 1.6vh;
        border-bottom: 1px solid rgb(238,238,238);
        height: 5vh;
        line-height: 5vh;
        display: flex;
        justify-content: space-between;
        .t1-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .t1-title{
            font-weight: 600;
            text-align: center;
            width: 30%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .t1-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
          }
        }
      }
      .t2{
        width: 100%;
        font-size: 1.6vh;
        background-color:#fff;
        height: 5vh;
        line-height: 5vh;
        display: flex;
        .t2-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .t2-title{
            font-weight: 600;
            text-align: center;
            width: 15%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .t2-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
          }
        }
      }
    }
    .bot{
      background-color:#fff;
      border: 1px solid rgb(238,238,238);
      //border-left: none;
      margin-top: 3vh;
      display: flex;
      flex-direction: column;
      .b1{
        display: flex;
        width: 100%;
        font-size: 1.6vh;
        border-bottom: 1px solid rgb(238,238,238);
        height: 5vh;
        line-height: 5vh;
        .b1-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .b1-title{
            font-weight: 600;
            text-align: center;
            width: 49%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .b1-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
          }
        }
      }
      .b2{
        background-color:#fff;
        width: 100%;
        font-size: 1.6vh;
        height: 5vh;
        line-height: 5vh;
        display: flex;
        .b2-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .b2-title{
            font-weight: 600;
            text-align: center;
            width: 14%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .b2-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
            display: flex;
            line-height: 5vh;
            align-items: center;
          }
        }
      }
    }
  }

  .no-border{
    .form-box{
      display: flex;
      flex-direction: column;
      background-color: #fff;
      border: 1px solid rgb(238, 238, 2378);
      border-bottom: none;
      width: 95%;
      margin: 0 auto;
      .form-item{
        display: flex;
        justify-content: left;
        height: auto;
        border-bottom: 1px solid rgb(238, 238, 238);
        font-size: 1.6vh;
        .title{
          width: 14%;
          text-align: center;
          border-right: 1px solid rgb(238, 238, 238);
          background-color: rgb(250, 250, 250);
          font-weight: 600;
        }
        .input{
          width: 85%;
          text-align: left;
          padding-left: 1vw;
        }
      }
    }
    .form-submit{
      margin: 2vh auto 0 auto;
      border: none;
      width: 95%;
      text-align: right;
    }
  }

  .approve-result{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid rgb(238, 238, 2378);
    border-bottom: none;
    width: 95%;
    margin: 0 auto;
    .form-item{
      display: flex;
      justify-content: left;
      height: auto;
      border-bottom: 1px solid rgb(238, 238, 238);
      font-size: 1.6vh;
      .title{
        width: 14%;
        text-align: center;
        border-right: 1px solid rgb(238, 238, 238);
        background-color: rgb(250, 250, 250);
        font-weight: 600;
      }
      .input{
        width: 85%;
        text-align: left;
        padding-left: 1vw;
      }
    }
  }
}
:deep(.el-dialog__header ){
  text-align: left !important;
  font-weight: 600;
}
:deep(.el-dialog__body){
  padding: 0 !important;
}
:deep(.el-textarea__inner ){
  height: 9vh;
}
.visible{
  display: none;
}
</style>
